<template>
  <div class="kind">
    <van-nav-bar
      title="宠物品种"
      left-text=""
      left-arrow
      class="header"
      @click-left="onClickLeft"
    />
    <van-grid :border="false" :column-num="1">
      <van-grid-item class="item">
        <span><van-icon id="img" name="like" /><span class="nb">喵星人</span></span>
      </van-grid-item>
      <van-grid-item class="item">
        <span> <van-icon id="img" name="star" /><span class="nb">汪星人</span></span>
      </van-grid-item>
      <van-grid-item class="item">
        <span><van-icon id="img" name="add" /><span class="nb">其他宠物</span></span>
      </van-grid-item>
    </van-grid>
    <div class="wenzi">
      <input type="checkbox" zhuangtai @click="!zhuangtai"><label>添加宠物</label>
      <br>
      <p>家有多宝的铲屎官</p>
      <p>记得要雨露均沾啊</p>
    </div>
  </div>
</template>

<script setup lang="ts">
const onClickLeft = () => window.history.back()
const zhuangtai = true
console.log(zhuangtai)
</script>

  <style scoped>
.kind {
  height: 640px;
  background: #f7f7f7;
}
.item {
  position: relative;
  margin: 30px 0;
  font-size: 20px;
}
.wenzi {
  margin: 20px auto;
  font-size: 14px;
  text-align: center;
  background: #ffffff;
  line-height: 30px;
}
#img {
  margin-right: 100px;
  margin-right: 80px;
  font-size: 50px;
  color: rgb(225 225 64);
}
.nb {
  position: absolute;
  top: 34%;
  left: 50%;
}
  </style>
